﻿<!DOCTYPE html>

<html>
<head>
<title></title>
<script type="text/javascript">
    function draw() {
        var canvas = document.getElementById("Canvas1");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.fillRect(25, 25, 100, 100); //矩形左上角位置(25,25),宽100,高100.默认填充为黑色
            ctx.clearRect(45, 45, 60, 60); //清除以(45,45)为左上角点.宽为60,高为60的一个矩形区域为透明
            ctx.strokeRect(50, 50, 50, 50); //矩形左上角位置(25,25),宽100,高100.画一个矩形边框.不填充
        }
    }
    window.onload = draw;
</script>
</head>
<body>
    <canvas id="Canvas1" width="150" height="150"></canvas>
    <div>
    fillRect 函数画了一个大的黑色矩形（100x100），clearRect 函数清空了中间 60x60 大小的方块，然后strokeRect 函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里，我们会看到和 clearRect 函数差不多另外两个方法，以及如何去改变图形的填充和边框颜色。
    </div>
</body>
</html>
